<script setup>
import { ref, reactive } from 'vue';
import { ElMessage } from 'element-plus';
import TitleValue from '@components/TitleValue';

const visible = ref(false);
// const lease2 = ref({})
const state = reactive({
    lease2: {},
});
const open = value1 => {
    state.lease2 = value1;
    visible.value = true;
    if (state.lease2.type == 2 && !state.lease2.data.current_report_detail) {
        state.lease2.data.current_report_detail = {};
    }
};

const customColors = [
    { color: '#FF9899', percentage: 59 },
    { color: '#C9D4FC', percentage: 79 },
    { color: '#CFEFD4', percentage: 100 },
];
const close = () => {
    state.lease2 = {};
    visible.value = false;
};
//把方法暴露给父组件
defineExpose({
    open,
});
</script>
<template>
    <el-dialog v-model="visible" :title="state.lease2 ? state.lease2.title : '风控结果'" center @close="close" destroy-on-close :fullscreen="true">
        <section v-if="state.lease2">
            <section v-if="state.lease2.isOK == true && state.lease2.type == 1">
                <div class="user-box">
                    <span>姓名：{{ state.lease2.data.name }}</span>
                    <!-- <span>年龄:28</span> -->
                    <span>身份证号码：{{ state.lease2.data.idCard }}</span>
                    <span style="border: 0">手机号：{{ state.lease2.data.mobile }}</span>
                    <!-- <span>号码归属地:浙江省杭州市</span> -->
                    <!-- <span style="border: 0">户籍:杭州市沛县</span> -->
                </div>
                <div class="score-box">
                    <div class="score-box-title">
                        <span>信贷风险综合信用评分:</span>
                        <span style="color: #ca0003; margin-left: 10px">
                            {{ state.lease2.data.overall_credit_score }}
                        </span>
                    </div>
                    <!-- <el-progress :percentage="100" type='line' status="warning" :indeterminate="true" /> -->
                    <div class="progress-box">
                        <el-progress :text-inside="true" :stroke-width="20" :percentage="state.lease2.data.score" status="exception">
                            <span>{{ state.lease2.data.overall_credit_score }}</span>
                        </el-progress>
                    </div>
                    <div class="progress-box-number">
                        <div>0</div>
                        <div></div>
                        <div></div>
                        <div></div>
                        <div></div>
                        <div>500</div>
                        <div>600</div>
                        <!-- <div>530</div>
                        <div>610</div> -->
                        <div>700</div>
                    </div>
                    <div class="marginY10">说明: 建议通过 [610，++); 建议审核 [530,610); 建议拒绝 (--,530)</div>
                </div>
                <div class="label-box">
                    <div class="label-box-title">
                        <span>信贷风险标签</span>
                    </div>
                    <div class="label-box-body">
                        <div class="label-box-body-item" :class="[`label-box-body-item${state.lease2.data.risk_grade_online_bank_apply}`]">
                            <div class="label-box-body-item-label">网银贷款申请风险等级</div>
                            <div class="label-box-body-item-val">
                                {{ state.lease2.data.risk_grade_online_bank_apply }}
                            </div>
                        </div>
                        <div class="label-box-body-item" :class="[`label-box-body-item${state.lease2.data.risk_grade_blacklist}`]">
                            <div class="label-box-body-item-label">黑名单命中情况风险等级</div>
                            <div class="label-box-body-item-val">
                                {{ state.lease2.data.risk_grade_blacklist }}
                            </div>
                        </div>
                        <div class="label-box-body-item" :class="[`label-box-body-item${state.lease2.data.risk_grade_p2p_apply}`]">
                            <div class="label-box-body-item-label">P2P网货申请风险等级</div>
                            <div class="label-box-body-item-val">
                                {{ state.lease2.data.risk_grade_p2p_apply }}
                            </div>
                        </div>
                        <div class="label-box-body-item" :class="[`label-box-body-item${state.lease2.data.risk_grade_num_associated_card}`]">
                            <div class="label-box-body-item-label">银行卡关联数风险等级</div>
                            <div class="label-box-body-item-val">
                                {{ state.lease2.data.risk_grade_num_associated_card }}
                            </div>
                        </div>
                        <div class="label-box-body-item" :class="[`label-box-body-item${state.lease2.data.risk_grade_num_associated_id}`]">
                            <div class="label-box-body-item-label">身份证号关联数风险等级</div>
                            <div class="label-box-body-item-val">
                                {{ state.lease2.data.risk_grade_num_associated_id }}
                            </div>
                        </div>
                        <div class="label-box-body-item" :class="[`label-box-body-item${state.lease2.data.risk_grade_greylist}`]">
                            <div class="label-box-body-item-label">灰名单命中情況风险等级</div>
                            <div class="label-box-body-item-val">
                                {{ state.lease2.data.risk_grade_greylist }}
                            </div>
                        </div>
                        <div class="label-box-body-item" :class="[`label-box-body-item${state.lease2.data.risk_grade_platform_apply}`]">
                            <div class="label-box-body-item-label">金融平台申请风险等级</div>
                            <div class="label-box-body-item-val">
                                {{ state.lease2.data.risk_grade_platform_apply }}
                            </div>
                        </div>
                        <div class="label-box-body-item" :class="[`label-box-body-item${state.lease2.data.risk_grade_financial_demand}`]">
                            <div class="label-box-body-item-label">金融业务需求增加情况风险等级</div>
                            <div class="label-box-body-item-val">
                                {{ state.lease2.data.risk_grade_financial_demand }}
                            </div>
                        </div>
                        <div class="label-box-body-item" :class="[`label-box-body-item${state.lease2.data.risk_grade_hit_of_list}`]">
                            <div class="label-box-body-item-label">名单类综合命中情况风险等级</div>
                            <div class="label-box-body-item-val">
                                {{ state.lease2.data.risk_grade_hit_of_list }}
                            </div>
                        </div>
                        <div class="label-box-body-item" :class="[`label-box-body-item${state.lease2.data.risk_grade_financial_lease}`]">
                            <div class="label-box-body-item-label">融资租赁业务频繁情况风险等级</div>
                            <div class="label-box-body-item-val">
                                {{ state.lease2.data.risk_grade_financial_lease }}
                            </div>
                        </div>
                        <div class="label-box-body-item" :class="[`label-box-body-item${state.lease2.data.risk_grade_debt}`]">
                            <div class="label-box-body-item-label">多方共债情况风险等级</div>
                            <div class="label-box-body-item-val">
                                {{ state.lease2.data.risk_grade_debt }}
                            </div>
                        </div>
                        <div class="label-box-body-item" :class="[`label-box-body-item${state.lease2.data.risk_grade_phonenumber_increase}`]">
                            <div class="label-box-body-item-label">手机号新增数风险等级</div>
                            <div class="label-box-body-item-val">
                                {{ state.lease2.data.risk_grade_phonenumber_increase }}
                            </div>
                        </div>
                        <div class="label-box-body-item" :class="[`label-box-body-item${state.lease2.data.risk_grade_strategy_pass_rate}`]">
                            <div class="label-box-body-item-label">历史决策流通过情况风险等级</div>
                            <div class="label-box-body-item-val">
                                {{ state.lease2.data.risk_grade_strategy_pass_rate }}
                            </div>
                        </div>
                        <div class="label-box-body-item" :class="[`label-box-body-item${state.lease2.data.risk_grade_financial_app_login}`]">
                            <div class="label-box-body-item-label">金融软件登录情况风险等级</div>
                            <div class="label-box-body-item-val">
                                {{ state.lease2.data.risk_grade_financial_app_login }}
                            </div>
                        </div>
                        <div class="label-box-body-item" :class="[`label-box-body-item${state.lease2.data.risk_grade_p2p_dur}`]">
                            <div class="label-box-body-item-label">P2P网货接触时长风险等级</div>
                            <div class="label-box-body-item-val">
                                {{ state.lease2.data.risk_grade_p2p_dur }}
                            </div>
                        </div>
                    </div>
                    <div class="label-box-body2">
                        <div class="label-box-body-item">
                            <div class="label-box-body-item-label">近7天申请租赁次数</div>
                            <div class="label-box-body-item-val">
                                {{ state.lease2.data.rent_history_times_d7 }}
                            </div>
                        </div>
                        <div class="label-box-body-item">
                            <div class="label-box-body-item-label">近1个月申请租赁次数</div>
                            <div class="label-box-body-item-val">
                                {{ state.lease2.data.rent_history_times_m1 }}
                            </div>
                        </div>
                        <div class="label-box-body-item">
                            <div class="label-box-body-item-label">近3个月申请租赁次数</div>
                            <div class="label-box-body-item-val">
                                {{ state.lease2.data.rent_history_times_m3 }}
                            </div>
                        </div>
                        <div class="label-box-body-item">
                            <div class="label-box-body-item-label">近6个月申请租赁次数</div>
                            <div class="label-box-body-item-val">
                                {{ state.lease2.data.rent_history_times_m6 }}
                            </div>
                        </div>
                        <div class="label-box-body-item">
                            <div class="label-box-body-item-label">历史租赁申请最高风险分数记录</div>
                            <div class="label-box-body-item-val">
                                {{ state.lease2.data.rent_history_max_grade }}
                            </div>
                        </div>
                        <div class="label-box-body-item">
                            <div class="label-box-body-item-label">是否命中租赁黑名单</div>
                            <!-- 1：命中 0：未命中 -->
                            <div class="label-box-body-item-val">
                                {{ state.lease2.data.rent_history_black ? '命中' : '未命中' }}
                            </div>
                        </div>
                    </div>
                    <div class="marginY10">标签等级说明: 等级分为A/B/C/D/E/F,A为风险最低，F为风险最高；历史租赁申请最高风险分数记录说明: 分值0-100，分数越高风险越高</div>
                </div>
                <div class="table-box">
                    <div class="table-box-title">
                        <span>法院风险信息</span>
                    </div>
                    <el-table :data="state.lease2.data2" border highlight-current-row style="width: 100%">
                        <el-table-column label-class-name="bra" align="center" type="index" label="序号" width="80" />
                        <el-table-column align="center" prop="sortTimeString" label="审结日期" width="180" />
                        <el-table-column align="center" prop="dataType" label="类型" width="180" />
                        <el-table-column align="center" prop="title" label="摘要说明" />
                        <el-table-column align="center" prop="matchRatio" label="匹配度" />
                    </el-table>
                </div>
            </section>
            <section v-else-if="state.lease2.isOK == true && state.lease2.type == 2">
                <div class="user-box2">
                    <span>姓名：{{ state.lease2.data.name }}</span>
                    <!-- <span>年龄:28</span> -->
                    <span>身份证号码：{{ state.lease2.data.idCard }}</span>
                    <span style="border: 0">手机号：{{ state.lease2.data.mobile }}</span>
                </div>
                <!-- <div class="quality-box">
                    <div class="quality-box-title">
                        <span>用户质量</span>
                    </div>
                </div> -->
                <div class="score-box score-box2">
                    <div class="score-box-title">
                        <span>报告评分</span>
                    </div>
                    <div class="progress-box2">
                        <div class="progress-box2-item">
                            <span>申请准入分</span>
                            <el-progress :text-inside="true" :stroke-width="20" :percentage="state.lease2.data.apply_report_detail.a22160001 / 10" :color="customColors">
                                <span>{{ state.lease2.data.apply_report_detail.a22160001 / 10 }}</span>
                            </el-progress>
                        </div>
                        <div class="progress-box2-item">
                            <span>申请置信度</span>
                            <el-progress :text-inside="true" :stroke-width="20" :percentage="state.lease2.data.apply_report_detail.a22160002*1" :color="customColors">
                                <span>{{ state.lease2.data.apply_report_detail.a22160002 }}</span>
                            </el-progress>
                        </div>
                        <div class="progress-box2-item">
                            <span>贷款行为分</span>
                            <el-progress :text-inside="true" :stroke-width="20" :percentage="state.lease2.data.apply_report_detail.b22170001 ? state.lease2.data.apply_report_detail.b22170001 / 10 : 0" :color="customColors">
                                <span>{{ state.lease2.data.apply_report_detail.b22170001 ? state.lease2.data.apply_report_detail.b22170001 / 10 : 0 }}</span>
                            </el-progress>
                        </div>
                        <div class="progress-box2-item">
                            <span>额度置信度</span>
                            <el-progress :text-inside="true" :stroke-width="20" :percentage="state.lease2.data.apply_report_detail.c22180002 || 0" :color="customColors">
                                <span>{{ state.lease2.data.apply_report_detail.c22180002 || '0' }}</span>
                            </el-progress>
                        </div>
                        <div class="progress-box2-item">
                            <span>授信额度</span>
                            <el-progress :text-inside="true" :stroke-width="20" :percentage="state.lease2.data.apply_report_detail.c22180001 ? state.lease2.data.apply_report_detail.c22180001 / 10 : 0" :color="customColors">
                                <span>
                                    {{ state.lease2.data.apply_report_detail.c22180001 ? state.lease2.data.apply_report_detail.c22180001 / 10 : 0 }}
                                </span>
                            </el-progress>
                        </div>
                    </div>
                </div>
                <div class="label-box2">
                    <div class="label-box2-title">
                        <span>报告评分</span>
                    </div>
                    <div class="label-box2-body">
                        <div class="label-box2-item">
                            <div class="label-box-body-item-label">
                                查询总次数
                                <span style="color: #2977ec">
                                    {{ state.lease2.data.apply_report_detail.a22160006 }}
                                </span>
                                次
                            </div>
                        </div>
                        <div class="label-box2-item">
                            <div class="label-box-body-item-label">
                                近一个月
                                <span style="color: #2977ec">
                                    {{ state.lease2.data.apply_report_detail.a22160008 }}
                                </span>
                                次
                            </div>
                        </div>
                        <div class="label-box2-item">
                            <div class="label-box-body-item-label">
                                近三个月
                                <span style="color: #2977ec">
                                    {{ state.lease2.data.apply_report_detail.a22160009 }}
                                </span>
                                次
                            </div>
                        </div>
                        <div class="label-box2-item">
                            <div class="label-box-body-item-label">
                                近六个月
                                <span style="color: #2977ec">
                                    {{ state.lease2.data.apply_report_detail.a22160010 }}
                                </span>
                                次
                            </div>
                        </div>
                        <div class="label-box2-item">
                            <div class="label-box-body-item-label">
                                最近一次查询时间
                                <span style="color: #2977ec">
                                    {{ state.lease2.data.apply_report_detail.a22160007 }}
                                </span>
                            </div>
                        </div>
                        <div class="label-box2-item">
                            <div class="label-box-body-item-label">
                                查询机构数
                                <span style="color: #2977ec">
                                    {{ state.lease2.data.apply_report_detail.a22160003 }}
                                </span>
                                家
                            </div>
                        </div>
                        <div class="label-box2-item">
                            <div class="label-box-body-item-label">
                                查询消费金额机构数
                                <span style="color: #2977ec">
                                    {{ state.lease2.data.apply_report_detail.a22160004 }}
                                </span>
                                家
                            </div>
                        </div>
                        <div class="label-box2-item">
                            <div class="label-box-body-item-label">
                                查询网贷类机构数
                                <span style="color: #2977ec">
                                    {{ state.lease2.data.apply_report_detail.a22160005 }}
                                </span>
                                家
                            </div>
                        </div>
                    </div>
                </div>
                <div class="label-box">
                    <div class="label-box-title">
                        <span>信用现状报告</span>
                    </div>
                    <div class="label-box-body">
                        <div class="label-box-body-item">
                            <div class="label-box-body-item-label">最近一次履约据具体数</div>
                            <div class="label-box-body-item-val" style="color: #e7584f; font-weight: 600">
                                {{ state.lease2.data.current_report_detail.b22170050 || '—' }}
                            </div>
                        </div>
                        <div class="label-box-body-item">
                            <div class="label-box-body-item-label">近6个月MO+逾期贷款笔数</div>
                            <div class="label-box-body-item-val" style="color: #e7584f; font-weight: 600">
                                {{ state.lease2.data.current_report_detail.b22170025 || '—' }}
                            </div>
                        </div>
                        <div class="label-box-body-item">
                            <div class="label-box-body-item-label">近12个月MO+逾期贷款笔数</div>
                            <div class="label-box-body-item-val" style="color: #e7584f; font-weight: 600">
                                {{ state.lease2.data.current_report_detail.b22170026 || '—' }}
                            </div>
                        </div>
                        <div class="label-box-body-item">
                            <div class="label-box-body-item-label">近24个月MO+逾期贷款笔数</div>
                            <div class="label-box-body-item-val" style="color: #e7584f; font-weight: 600">
                                {{ state.lease2.data.current_report_detail.b22170027 || '—' }}
                            </div>
                        </div>
                        <div class="label-box-body-item">
                            <div class="label-box-body-item-label">近6个月M1+逾期贷款笔数</div>
                            <div class="label-box-body-item-val" style="color: #e7584f; font-weight: 600">
                                {{ state.lease2.data.current_report_detail.b22170028 || '—' }}
                            </div>
                        </div>
                        <div class="label-box-body-item">
                            <div class="label-box-body-item-label">近12个月M1+逾期贷款笔数</div>
                            <div class="label-box-body-item-val" style="color: #e7584f; font-weight: 600">
                                {{ state.lease2.data.current_report_detail.b22170029 || '—' }}
                            </div>
                        </div>
                        <div class="label-box-body-item">
                            <div class="label-box-body-item-label">近24个月M1+逾期贷款笔数</div>
                            <div class="label-box-body-item-val" style="color: #e7584f; font-weight: 600">
                                {{ state.lease2.data.current_report_detail.b22170030 || '—' }}
                            </div>
                        </div>
                        <div class="label-box-body-item">
                            <div class="label-box-body-item-label">近6个月累计逾期金额</div>
                            <div class="label-box-body-item-val" style="color: #e7584f; font-weight: 600">
                                {{ state.lease2.data.current_report_detail.b22170031 || '—' }}
                            </div>
                        </div>
                        <div class="label-box-body-item">
                            <div class="label-box-body-item-label">近12个月累计逾期金额</div>
                            <div class="label-box-body-item-val" style="color: #e7584f; font-weight: 600">
                                {{ state.lease2.data.current_report_detail.b22170032 || '—' }}
                            </div>
                        </div>
                        <div class="label-box-body-item">
                            <div class="label-box-body-item-label">近24个月累计逾期金额</div>
                            <div class="label-box-body-item-val" style="color: #e7584f; font-weight: 600">
                                {{ state.lease2.data.current_report_detail.b22170033 || '—' }}
                            </div>
                        </div>
                        <!-- <div class="label-box-body-item" style="border: 1px solid #78E487;">
                            <div class="label-box-body-item-label">已放款贷款笔数</div>
                            <div class="label-box-body-item-val" style="color:#78E487;">{{state.lease2.data.current_report_detail.b22170033}}</div>
                        </div> -->
                        <div class="label-box-body-item" style="border: 1px solid #78e487">
                            <div class="label-box-body-item-label">贷款已结清订单数</div>
                            <div class="label-box-body-item-val" style="color: #24b338; font-weight: 600">
                                {{ state.lease2.data.current_report_detail.b22170052 || '—' }}
                            </div>
                        </div>
                        <div class="label-box-body-item" style="border: 1px solid #78e487">
                            <div class="label-box-body-item-label">正常还款订单数占贷款总订单数比例数</div>
                            <div class="label-box-body-item-val" style="color: #24b338; font-weight: 600">
                                {{ state.lease2.data.current_report_detail.b22170034 || '—' }}
                            </div>
                        </div>
                        <div class="label-box-body-item" style="border: 1px solid #78e487">
                            <div class="label-box-body-item-label">最近一次贷款放款时间</div>
                            <div class="label-box-body-item-val" style="color: #24b338; font-weight: 600">
                                {{ state.lease2.data.current_report_detail.b22170054 || '—' }}
                            </div>
                        </div>
                        <div class="label-box-body-item" style="border: 1px solid #96cbff">
                            <div class="label-box-body-item-label">信用贷款时长</div>
                            <div class="label-box-body-item-val" style="color: #474646; font-weight: 600">
                                {{ state.lease2.data.current_report_detail.b22170053 || '—' }}
                            </div>
                        </div>
                    </div>

                    <div style="color: #595959; width: 100%; font-weight: 500" class="marginY10">
                        <p>近12月贷款金额范围内的贷款笔数</p>
                    </div>
                    <div class="label-box-body2">
                        <div class="label-box-body-item2">
                            <div class="label-box-body-item-label">1k以下</div>
                            <div class="label-box-body-item-val">
                                {{ state.lease2.data.current_report_detail.b22170012 || '—' }}
                            </div>
                        </div>
                        <div class="label-box-body-item2">
                            <div class="label-box-body-item-label">1-3k</div>
                            <div class="label-box-body-item-val">
                                {{ state.lease2.data.current_report_detail.b22170013 || '—' }}
                            </div>
                        </div>
                        <div class="label-box-body-item2">
                            <div class="label-box-body-item-label">3-10k</div>
                            <div class="label-box-body-item-val">
                                {{ state.lease2.data.current_report_detail.b22170014 || '—' }}
                            </div>
                        </div>
                        <div class="label-box-body-item2">
                            <div class="label-box-body-item-label">1w以上</div>
                            <div class="label-box-body-item-val">
                                {{ state.lease2.data.current_report_detail.b22170015 || '—' }}
                            </div>
                        </div>
                    </div>
                </div>
                <div class="table-box">
                    <div class="table-box-title">
                        <span>行为雷达报告详情</span>
                    </div>
                    <el-table :data="state.lease2.data.behavior_report_detail" border highlight-current-row style="width: 100%">
                        <el-table-column align="center" prop="name" label="详情" />
                        <el-table-column align="center" prop="num1" label="近1个月" />
                        <el-table-column align="center" prop="num3" label="近3个月" />
                        <el-table-column align="center" prop="num6" label="近6个月" />
                        <el-table-column align="center" prop="num12" label="近12个月" />
                        <el-table-column align="center" prop="num24" label="近24个月" />
                    </el-table>
                </div>
            </section>
            <section v-else>
                <el-row>
                    <el-col>
                        <!-- <title-value title="分值:" class="font2" :value="lease.result" /> -->
                    </el-col>
                </el-row>
                <el-row>
                    <el-col>
                        <!-- <title-value title="原因:" class="font2" :value="lease.reason" /> -->
                    </el-col>
                </el-row>
                <div>分值标准说明： 分值在200⾄700之间，得分越 低，⻛险越⾼: 【620， ++）建议通过； 【500， 620）建议审核； （--， 500）建议拒绝</div>
            </section>
        </section>
    </el-dialog>
</template>

<style lang="scss" scoped>
.user-box {
    display: flex;
    justify-content: space-between;
    background: #ffffff;
    height: 90px;
    width: 100%;
    border-radius: 4px;
    align-items: center;
    font-size: 15px;
    font-family: PingFangSC-Medium, PingFang SC;
    font-weight: 500;
    color: #1f1f20;
    margin-bottom: 20px;
    box-sizing: border-box;

    span {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        // width: 300px;
        flex: 1;
        height: 50px;
        border-right: 1px solid #e3e3e3;
    }
}

.user-box2 {
    display: flex;
    // justify-content: space-between;
    background: #ffffff;
    height: 90px;
    width: 100%;
    border-radius: 4px;
    align-items: center;
    font-size: 15px;
    font-family: PingFangSC-Medium, PingFang SC;
    font-weight: 500;
    color: #1f1f20;
    margin-bottom: 20px;
    box-sizing: border-box;

    span {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        flex: 1;
        // width: 300px;
        height: 50px;
        border-right: 1px solid #e3e3e3;
    }
}

.score-box {
    display: flex;
    flex-direction: column;
    // justify-content: space-between;
    background: #ffffff;
    height: 220px;
    width: 100%;
    border-radius: 4px;
    align-items: center;
    font-size: 15px;
    font-family: PingFangSC-Medium, PingFang SC;
    font-weight: 500;
    color: #1f1f20;
    margin-bottom: 20px;
    padding: 24px;
    box-sizing: border-box;

    .score-box-title {
        width: 100%;
        margin-bottom: 20px;
        font-size: 18px;
        font-family: PingFangSC-Medium, PingFang SC;
        font-weight: 500;
        color: #1f1f20;
    }

    .progress-box {
        width: 85%;
        height: 48px;
        background: #fff6f0;
        padding: 12px;
        box-sizing: border-box;
        border-radius: 4px;

        .el-progress--line {
            // margin-bottom: 15px;
            width: 100%;
            height: 24px;
            // background: linear-gradient(90deg, rgba(255, 202, 180, 0.48) 0%, #ff554b 100%);
            border-radius: 4px;
        }
    }

    .progress-box-number {
        width: 85%;
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        margin-bottom: 30px;
        font-size: 14px;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: #343840;
    }

    font-size: 14px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #6c6c6c;
}

.score-box2 {
    height: 234px;
    align-items: flex-start;

    .progress-box2 {
        width: 85%;
        // height: 48px;
        // background: #807974;
        padding: 12px;
        box-sizing: border-box;
        border-radius: 4px;

        .progress-box2-item {
            display: flex;

            :deep(.el-progress-bar__outer) {
                background: #f3f5f8;
            }

            span {
                width: 80px;
            }
        }

        .el-progress--line {
            // margin-bottom: 15px;
            width: 100%;
            height: 24px;
            // background: linear-gradient(90deg, rgba(255, 202, 180, 0.48) 0%, #ff554b 100%);
            // border-radius: 4px;
        }
    }
}

.label-box {
    display: flex;
    flex-direction: column;
    background: #ffffff;
    height: 475px;
    width: 100%;
    border-radius: 4px;
    align-items: center;
    font-size: 15px;
    font-family: PingFangSC-Medium, PingFang SC;
    font-weight: 500;
    color: #1f1f20;
    margin-bottom: 20px;
    padding: 24px;
    box-sizing: border-box;

    .label-box-title {
        width: 100%;
        margin-bottom: 20px;
        font-size: 18px;
        font-family: PingFangSC-Medium, PingFang SC;
        font-weight: 500;
        color: #1f1f20;
    }

    .label-box-body {
        width: 100%;
        display: flex;
        flex-wrap: wrap;
        box-sizing: border-box;

        .label-box-body-item {
            width: 256px;
            height: 60px;
            background: #ffffff;
            border-radius: 2px;
            border: 1px solid #ffb3ae;
            color: #ffb3ae;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            margin: 0 24px 24px 0;
            box-sizing: border-box;

            .label-box-body-item-label {
                font-size: 14px;
                font-family: PingFangSC-Medium, PingFang SC;
                font-weight: 500;
                color: #595959;
            }

            .label-box-body-item-val {
                // color: #ffb3ae;
            }
        }

        .label-box-body-itemA {
            border: 1px solid #91db9b;
            color: #91db9b;
        }

        .label-box-body-itemB {
            border: 1px solid #91db9b;
            color: #91db9b;
        }

        .label-box-body-itemC {
            border: 1px solid #ffc86b;
            color: #ffc86b;
        }

        .label-box-body-itemD {
            border: 1px solid #ffc86b;
            color: FFC86B;
        }

        .label-box-body-itemE {
            border: 1px solid #ffb3ae;
            color: #ffb3ae;
        }

        .label-box-body-itemF {
            border: 1px solid #ffb3ae;
            color: #ffb3ae;
        }

        .label-box-body-item:nth-child(6n) {
            margin: 0;
        }
    }

    .label-box-body2 {
        width: 100%;
        display: flex;
        flex-wrap: wrap;
        box-sizing: border-box;

        .label-box-body-item {
            width: 256px;
            height: 60px;
            background: #fefbf9;
            border-radius: 2px;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            margin: 0 24px 24px 0;
            box-sizing: border-box;

            .label-box-body-item-label {
                font-size: 14px;
                font-family: PingFangSC-Medium, PingFang SC;
                font-weight: 500;
                color: #595959;
            }

            .label-box-body-item-val {
                // color: #ffb3ae;
            }
        }

        .label-box-body-item:nth-child(6n) {
            margin: 0;
        }

        .label-box-body-item2 {
            flex: 1;
            height: 60px;
            background: #fefbf9;
            border-radius: 2px;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            margin: 0 24px 24px 0;
            box-sizing: border-box;

            .label-box-body-item-label {
                font-size: 14px;
                font-family: PingFangSC-Medium, PingFang SC;
                font-weight: 500;
                color: #595959;
            }

            .label-box-body-item-val {
                color: #e7584f;
            }
        }
    }

    font-size: 14px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #6c6c6c;
}

.label-box2 {
    display: flex;
    background: #ffffff;
    flex-direction: column;
    width: 100%;
    height: 277px;
    border-radius: 4px;
    align-items: center;
    font-size: 15px;
    font-family: PingFangSC-Medium, PingFang SC;
    font-weight: 500;
    color: #1f1f20;
    margin-bottom: 20px;
    padding: 24px;
    box-sizing: border-box;

    .label-box2-title {
        width: 100%;
        margin-bottom: 20px;
        font-size: 18px;
        font-family: PingFangSC-Medium, PingFang SC;
        font-weight: 500;
        color: #1f1f20;
    }

    .label-box2-body {
        width: 100%;
        display: flex;
        flex-wrap: wrap;
        // justify-content: space-between;
        box-sizing: border-box;

        .label-box2-item {
            width: 400px;
            height: 70px;
            background: #f9fbfe;
            border-radius: 4px;
            margin-right: 20px;
            display: flex;
            justify-content: center;
            align-items: center;
            margin-bottom: 20px;
        }

        .label-box2-item:nth-child(4n) {
            margin-right: 0;
        }
    }
}

.table-box {
    display: flex;
    flex-direction: column;
    background: #ffffff;
    // height: 475px;
    width: 100%;
    border-radius: 4px;
    box-sizing: border-box;
    padding: 24px;

    .table-box-title {
        width: 100%;
        margin-bottom: 20px;
        font-size: 18px;
        font-family: PingFangSC-Medium, PingFang SC;
        font-weight: 500;
        color: #1f1f20;
    }

    :deep(.el-table__body .el-table__row:nth-last-child(2)) {
        color: #24b338 !important;
    }

    :deep(.el-table__body .el-table__row:last-child) {
        color: #c50003 !important;
    }
}

:deep(.el-progress.is-exception .el-progress-bar__inner) {
    background: linear-gradient(90deg, rgba(255, 202, 180, 0.48) 0%, #ff554b 100%) !important;
    border-radius: 4px;
}

:deep(.el-progress-bar__innerText) {
    // margin-left: -30px;
    margin-right: 10px;
}

:deep(.el-progress-bar__outer) {
    background: #fff6f0;
    border-radius: 4px;
}

:deep(.el-table th.el-table__cell) {
    background: #fefbf9;
    color: #1f1f20;
}
</style>
